<template>
  <div style="margin-top:2.5rem">
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">待支付</mt-tab-item>
      <mt-tab-item id="2">历史记录</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <section class="yaofang_content">
          <p class="y_c_input">
            <input type="text" placeholder="输入处方号、医生名称、药方编号查询" v-model="recordKey">
            <i class="iconfont icon-guanbi" @click="searchRecord('0')"></i>
          </p>
          <ul>
            <li v-for="item in list" :key="item.id">
              <div class="yaofang_h">
                <p class="yaofang_h_name">医生信息：{{item.DOCTORNAME}}&nbsp;&nbsp;&nbsp;&nbsp;科室：{{item.DOCTORDEPARTMENT}}</p>
                <p class="yaofang_h_name">患者信息：{{item.PATIENT_NAME}}&nbsp;&nbsp;&nbsp;&nbsp;性别：{{item.PATIENT_SEX=='m'?'男':'女'}}</p>
                <p><span class="yaofang_h_number">订单编号：{{item.ORDERCODE}}</span><span class="yaofang_h_status">未付款</span></p>
              </div>
              <div class="yaofang_c">
                <!-- <p><b>病情描述</b>：{{item.SYMPTOM}}</p> -->
                <p>处方号：{{item.PRESCRIBEID}}</p>
                <p><span>药方费</span><span>{{item.PRESCRIBEUNITPRICE}}元</span></p>
                <!--                 <p><span>加工费</span><span>{{item.JGF}}元</span></p>
                <p><span>配送费</span><span>{{item.PSF}}元</span></p> -->
              </div>
              <div class="yaofang_f">
                <p><span class="yaofang_f_time">日期：{{item.OPENDATE}}</span><span class="yaofang_f_money">需付款：{{Number(item.PRESCRIBEUNITPRICE)+Number(item.JGF)+Number(item.PSF)}}元</span></p>
                <p class="yaofang_f_button">
                  <span>
                    <nuxt-link :to="{path:'/chufang/nonePayment',query:{kdfw: item.KDFW, jeyf:item.JE_YF,ayid:item.DURGSTOREID,fs:item.FS,orderId:item.ORDID,doctorname:item.DOCTORNAME,yaofangname:item.DURGSTORENAME,yaofangadr:item.DURGSTOREADDR,yaofangphone:item.DURGSTOREPHONE,draglist:item.DURGSLIST,acsm:item.ACSM,yff:item.PRESCRIBEUNITPRICE,jgf:item.JGF,psf:item.PSF,druglist:item.DURGSLIST,oprlb
                    :item.OPRLB,leavemes:item.ORDERLEAVEMESSAGE}}" tag="a"
                    >付款</nuxt-link>
                  </span>
                  <span style="float:right; padding-right: 0.4rem;">
                    <!-- <nuxt-link :to="{name:'pay',query:{yff:item.PRESCRIBEUNITPRICE,jgf:item.JGF,psf:item.PSF,orderId:item.ORDID}}" tag="a">付款</nuxt-link> -->
                    <a href="#" @click="deletePay(item.ORDERID)">删除</a>
                  </span>
                </p>
              </div>
            </li>
          </ul>
          <p v-if="list" class="loadingT">暂无更多数据</p>
        </section>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <!-- <div class="jf_history">
                <p>
                    <b>日期选择</b>
                    <span>近一月</span>
                    <span>近三月</span>
                    <span>近一年</span>
                    <b>时间</b>
                </p>

            </div> -->
        <section class="yaofang_content" v-infinite-scroll="loadMore1" infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
        >
          <p class="y_c_input">
            <input type="text" placeholder="输入处方号、医生名称、药方编号查询" v-model="recordKey">
            <i class="iconfont icon-guanbi" @click="searchRecord('')"></i>
          </p>
          <ul>
            <li v-for="item in alllist" :key="item.id">
              <div class="yaofang_h">
                <p class="yaofang_h_name">医生信息：{{item.DOCTORNAME}}&nbsp;&nbsp;&nbsp;&nbsp;科室：{{item.DOCTORDEPARTMENT}}</p>
                <p class="yaofang_h_name">患者信息：{{item.PATIENT_NAME}}&nbsp;&nbsp;&nbsp;&nbsp;性别：{{item.PATIENT_SEX=='m'?'男':'女'}}</p>
                <p><span class="yaofang_h_number">订单编号：{{item.ORDERCODE}}</span><span class="yaofang_h_status" v-show="item.ORDSTATUS=='3'">已付款</span><span class="yaofang_h_status" v-show="item.ORDSTATUS=='0'">未付款</span><span class="yaofang_h_status" v-show="item.ORDSTATUS=='4'">已发货</span><span class="yaofang_h_status" v-show="item.ORDSTATUS=='5'">已收药</span></p>
              </div>
              <div class="yaofang_c">
                <!-- <p><b>病情描述</b>：{{item.SYMPTOM}}</p> -->
                <p>处方号：{{item.PRESCRIBEID}}</p>
                <p><span>药方费</span><span>{{item.PRESCRIBEUNITPRICE}}元</span></p>
                <!--                 <p><span>加工费</span><span>{{item.JGF}}元</span></p>
                <p><span>配送费</span><span>{{item.PSF}}元</span></p> -->
              </div>
              <div class="yaofang_f">
                <p><span class="yaofang_f_time">日期：{{item.OPENDATE}}</span><span class="yaofang_f_money" v-if="item.ORDSTATUS!=='0'">实付款：{{Number(item.PRESCRIBEUNITPRICE)+Number(item.JGF)+Number(item.PSF)}}元</span><span class="yaofang_f_money" v-else>需付款：{{Number(item.PRESCRIBEUNITPRICE)+Number(item.JGF)+Number(item.PSF)}}元</span></p>
                <p class="yaofang_f_button">
                  <span>
                    <nuxt-link :to="{path:'/chufang/nonePayment',query:{kdfw: item.KDFW, jeyf:item.JE_YF,fs:item.FS,orderId:item.ORDID,doctorname:item.DOCTORNAME,yaofangname:item.DURGSTORENAME,yaofangadr:item.DURGSTOREADDR,yaofangphone:item.DURGSTOREPHONE,draglist:item.DURGSLIST,acsm:item.ACSM,yff:item.PRESCRIBEUNITPRICE,jgf:item.JGF,psf:item.PSF,druglist:item.DURGSLIST,leavemes:item.ORDERLEAVEMESSAGE,oprlb
                    :item.OPRLB}}" tag="a" v-if="item.ORDSTATUS=='0'"
                    >付款</nuxt-link>
                  </span>
                  <span>
                    <nuxt-link :to="{path:'/chufang/prescribeOrderDetail',query:{doctorname:item.DOCTORNAME,kuaidiname:item.SHR,kuaidiphone:item.SHRMOBILE,yaofangname:item.DURGSTORENAME,yaofangadr:item.DURGSTOREADDR,yaofangphone:item.DURGSTOREPHONE,draglist:item.DURGSLIST,ordercode:item.ORDERCODE,orderstatus:item.ORDSTATUS,yff:item.PRESCRIBEUNITPRICE,jgf:item.JGF,psf:item.PSF,kdmc:item.KDMC,kdno:item.KDNO,kdmcvalue:item.KDMCVALUE,oprlb
                    :item.OPRLB}}" tag="a" v-if="item.ORDSTATUS!=='0'&&item.ORDSTATUS=='4'||item.ORDSTATUS=='5'"
                    >查看订单</nuxt-link>
                    <span>
                      <nuxt-link :to="{path:'/chufang/unship',query:{ayid:item.DURGSTOREID,doctorname:item.DOCTORNAME,kuaidiname:item.SHR,kuaidiphone:item.SHRMOBILE,yaofangname:item.DURGSTORENAME,yaofangadr:item.DURGSTOREADDR,acsm:item.ACSM,yaofangphone:item.DURGSTOREPHONE,syr:item.SHR,syrdh:item.SHRMOBILE,draglist:item.DURGSLIST,status:item.ORDSTATUS,shadr:item.SHADDRESS,leavemes:item.ORDERLEAVEMESSAGE,acsm:item.ACSM,yff:item.PRESCRIBEUNITPRICE,jgf:item.JGF,psf:item.PSF,oprlb
                      :item.OPRLB}}" tag="a" v-if="item.ORDSTATUS!=='0'&&item.ORDSTATUS=='3'"
                      >查看订单</nuxt-link>
                    </span>
                    <nuxt-link :to="{path:'/chufang/checkExpressInfo',query:{kdmc:item.KDMC,kdno:item.KDNO,kdmcvalue:item.KDMCVALUE}}" tag="a" v-if="item.ORDSTATUS=='4'">物流信息</nuxt-link>
                  </span>
                  <span style="float:right;padding-right: 0.4rem;">
                    <a href="#" @click="deletePay(item.ORDERID)" v-if="item.ORDSTATUS=='0'">删除</a>
                  </span>
                </p>
              </div>
            </li>
          </ul>
          <p class="loadingT">{{loadingText}}</p>
        </section>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>


<script>
export default {
  data() {
    return {
      selected: '1',
      queren1: '确认收货',
      headTitle: '我的药方',
      alertText: '删除成功！',
      showAlert: false,
      list: [],
      alllist: [],
      ts: this.newStore(),
      tq: this.getData(),
      busy: true,
      page: 1,
      loadingText: '',
      recordKey: '',
    };
  },
  created() {
    this.getprescribeOrderList('0');
    this.getallprescribeOrderList(true);
  },
  methods: {
    searchRecord(type) {
      if (type == '') {
        const req1 = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.07.05',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
            DATA: {
              keywords: this.recordKey,
              ordstatus: type,
              rowsperpage: '200',
              page: '1',
              ordercolumn: 'openDate',
              ordertype: 'desc',
            },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': req1,
        }).then((ts) => {
          this.alllist = ts.d.DATAOBJ.DATA;
          this.recordKey = '';
          this.loadingText = '暂无更多数据';
        });
      } else {
        const req = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.07.05',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
            DATA: {
              keywords: this.recordKey,
              ordstatus: type,
              rowsperpage: '200',
              page: '1',
              ordercolumn: 'openDate',
              ordertype: 'desc',
            },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': req,
        }).then((ts) => {
          console.log(ts.d);
          this.list = ts.d.DATAOBJ.DATA;
          this.recordKey = '';
          this.loadingText = '暂无更多数据';
        });
      }
    },
    loadMore1() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getallprescribeOrderList(true);
      }, 500);
    },
    queren(id) {
      const querenmes = window.confirm('是否确认收货？');
      if (querenmes == true) {
        const res = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.02.29',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
            DATA: { orderId: id },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': res,
        }).then(() => {
          this.showAlert = true;
          this.alertText = '确认成功';
        });
      }
      this.$router.go(0);
    },
    select(type) {
      // alert(type);
      this.getprescribeOrderList(type, true);
    },
    getprescribeOrderList(type) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.07.05',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
          DATA: {
            ordstatus: type,
            rowsperpage: '200',
            page: '1',
            ordercolumn: 'openDate',
            ordertype: 'desc',
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        // alert(JSON.stringify(ts.d.DATAOBJ.DATA));
        this.list = ts.d.DATAOBJ.DATA;
      });
    },
    getallprescribeOrderList(flag) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.07.05',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
          DATA: {
            ordstatus: '',
            rowsperpage: '10',
            page: `${this.page}`,
            ordercolumn: 'openDate',
            ordertype: 'desc',
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        // this.list = ts.d.DATAOBJ.DATA;
        if (flag) {
          this.alllist = this.alllist.concat(ts.d.DATAOBJ.DATA);
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '暂无更多数据';
          } else {
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.alllist = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }
      });
    },
    closeTip() {
      this.showAlert = false;
    },
    deletePay(id) {
      const Mes2 = window.confirm('是否删除订单？');
      if (Mes2) {
        const res = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.02.24',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
            DATA: { orderId: id, ordstatus: '1' },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': res,
        }).then((ts) => {
          this.list.splice(0, 1);
          this.showAlert = true;
          this.alertText = '删除成功！';
        });
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.mint-navbar
    width: 100%;
    position: fixed;
    top: 2.5rem;
    z-index: 800;
    font-size 1rem
.mint-tab-container
    background #f1f1f1
    min-height 100vh
    margin-top 5.5rem
.jf_history
    p
        display flex
        justify-content space-around
        &:first-child
            height 3rem
            line-height 3rem
            font-size 1rem
            background #fff
            border-top 1px solid #ccc
            box-shadow 1px 1px 1px #ccc
        span
            height 1.5rem
            line-height 1.5rem
            background #26a2ff
            border-radius 0.3rem
            font-size 0.7rem
            color #fff
            padding 0rem 0.4rem
            margin-top 0.7rem
.c_c_search{
  position: fixed;
  z-index: 500;
  right: 5%;
  top: 0;
}
.c_c_search i{
  font-size: 1.8rem;
  color:#fff
}
.loadingT{
  text-align: center;
  color: #3190e8;
  height: 2rem;
  line-height: 2rem;
  font-size:0.9rem
}
.empty_data {
  text-align: center;
}
.c_content {
  background: #fff;
}
.c_navbar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 0.6rem;
  border-bottom: 1px solid #ebebeb;
  position: fixed;
  top: 2.8rem;
  width: 100%;

}
.nonelist {
  text-align: center;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav div {
  flex: 1;
  text-align: center;
}
.c_nav span {
  padding: 0.4rem;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav_active {
  border-bottom: 2px solid #3190e8;
}
.yaofang_content {
  background: #f5f5f5;
  margin: 0.1rem 0;
}
.yaofang_content ul li {
  margin-top: 0.3rem;
  background-color: #fff;
}
.yaofang_content p {
  margin-bottom: 0.5rem;
}
.y_c_input input{
  width: 100%;
  border: none;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  padding-right: 2rem
}
.y_c_input{
  position: relative;
}
.y_c_input i{
  position: absolute;
  top: 10%;
  right: 2%;
  font-size: 1.8rem;
  color:#3190e8;
  display: inline-block
}
.yaofang_content div {
  border-bottom: 1px solid #f1f1f1;
}
.yaofang_h{
  font-size:1rem
}
.yaofang_h_name {
  font-family: "Microsoft Yahei";
  color: #333;
  margin-bottom 0.2rem
}
.yaofang_h_number {
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  color: #333;
}
.yaofang_h_status {
  font-size: 1rem;
  color: rgb(236, 115, 68);
  float: right;
  padding-right: 0.8rem;
  font-family: "Microsoft Yahei";
}
.yaofang_c p:first-child {
  font-family: "Microsoft Yahei";
  color: #333;
  font-size: 0.9rem;
}
.yaofang_c p {
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  color: #777;
  padding: 0.2rem;
}
.yaofang_c span:last-child {
  float: right;
    padding-right: 0.8rem;
}
.yaofang_f p{
  padding-bottom: 0.4rem;
}
.yaofang_f_time {
  color: #aaa;
  font-size: 0.9rem;
}
.yaofang_f_money {
  float: right;
  color: green;
  text-align: left;
  font-family: "Microsoft Yahei";
  font-size: 0.9rem;
    padding-right: 0.8rem;
}
.yaofang_f_button a {
  border: 1px solid #ccc;
  text-decoration: none;
  font-size: 0.9rem;
  color: #fff;
  padding: 0.4rem 0.8rem;
  margin-right: 0.4rem;
  background-color: #3190e8;
  border-radius: 0.2rem;
  border: none;
}
/* .yaofang_f_button span:last-child {
  float: right;
} */
.loadmore {
  text-align: center;
  color: #aaa;
  line-height: 2rem;
}
</style>
